<template>
  <div class="main-box">
    <van-nav-bar class="top-title" title="个人主页" placeholder="true" fixed="true" />
    <div class="box1">
      <div class="user-box">
        <div class="head"><img :src="user.head" /></div>
        <div class="name">{{ user.name }}</div>
        <div class="data">
          <div class="sport-data">
            <div class="num">{{ user.sportTime }}</div>
            <div class="text">总运动时间(h)</div>
          </div>
          <div class="sport-data">
            <div class="num">{{ user.cal }}</div>
            <div class="text">总消耗卡路里(cal)</div>
          </div>
          <div class="sport-data">
            <div class="num">{{ user.km }}</div>
            <div class="text">总运动路程(km)</div>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="box2">
      <div class="title">
        <img src="../assets/images/weekSport.png" />
        <span>本周运动情况</span>
      </div>
      <div ref="weekSport" class="week-sport"></div>
    </div>
    <hr />
    <div class="box3">
      <div class="left">
        <div class="title">每周排名</div>
        <div class="data">本周共运动{{ weekNum }}小时</div>
      </div>
      <div class="right">
        第<span>{{ weekPaiming }}</span
        >名
      </div>
    </div>
    <hr />
    <div class="box3">
      <div class="left">
        <div class="title">每月排名</div>
        <div class="data">本月共运动{{ monthsNum }}小时</div>
      </div>
      <div class="right">
        第<span>{{ monthsPaiming }}</span
        >名
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

// 用户数据
var user = ref({
  name: '三毛',
  head: '../../src/assets/images/sanmao.jpg',
  sportTime: 730,
  cal: '13333K',
  km: 12562
})

// 本周运动情况折线图
var weekSport = ref()
onMounted(() => {
  var chart = echarts.init(weekSport.value)
  var option1 = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '跑步',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '骑车',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 150, 120, 330, 0]
      },
      {
        name: '跳绳',
        type: 'line',
        stack: 'Total',
        data: [160, 102, 70, 30, 50, 120, 30]
      }
    ]
  }
  chart.setOption(option1)
})

// 周运动量和名次
var weekNum = ref(46.2)
var weekPaiming = ref(3)
// 月运动量和名次
var monthsNum = ref(215.3)
var monthsPaiming = ref(13)
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.main-box {
  background-size: cover;
  margin-bottom: 20px;
  .top-title {
  }
  .box1 {
    margin-bottom: 20px;
    .user-box {
      display: flex;
      padding-top: 50px;
      flex-direction: column;
      .head {
        margin-left: auto;
        margin-right: auto;
        img {
          width: 150px;
          border-radius: 50%;
        }
      }
      .name {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        font-size: 20px;
      }
      .data {
        display: flex;
        margin-top: 20px;
        justify-content: space-evenly;

        .sport-data {
          width: 300px;
          width: 30%;
          .num {
            margin-left: auto;
            margin-right: auto;
            width: 100px;
            font-size: 30px;
          }
          .text {
          }
        }
      }
    }
  }
  .box2 {
    margin-bottom: 100px;
    margin-top: 30px;
    height: 300px;
    .title {
      margin-left: 5%;
      font-size: 20px;
      display: flex;
      align-items: center;
      img {
        width: 30px;
      }
      span {
        margin-left: 2%;
      }
    }
    .week-sport {
      height: 100%;
    }
  }
  .box3 {
    display: flex;
    height: 70px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    margin-bottom: 20px;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 20px;
      }
      .data {
      }
    }
    .right {
      margin-top: auto;
      margin-bottom: auto;
      span {
        font-size: 35px;
      }
    }
  }
}
</style>
